<template>
  <div class="content">
    <div class="tabInfo">
      <div class="search">
        <!-- 搜索按钮操作 -->
        <div class="left">
          <SearchForm :formObj="formObj" :formData="formInline"></SearchForm>
        </div>

        <div class="btn">
          <el-button
            type="primary"
            :icon="Plus"
            v-hasPermi="['system:listener:Registration']"
            @click="addPosition"
          >
            <el-icon>
              <Plus />
            </el-icon>
            新建</el-button
          >
          <!-- <el-button type="primary" @click="setTalent">收录人才库</el-button> -->
        </div>
      </div>
      <div class="tabTable">
        <TabTable
          ref="tableDataRef"
          :isShowBtn="true"
          :tableData="tableData"
          :pagination="pagination"
          @handleSelectionChange="handleSelectionChange"
          @handleInfo="handleInfo"
          @handleGetApplication="handleGetApplication"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
          @changeStatus="changeStatus"
        >
        </TabTable>
      </div>
    </div>
  </div>
</template>
<script setup>
import TabTable from "../components/tabTable.vue";
import SearchForm from "@/components/searchForm/index.vue";
import { saveOrUpdate } from "@/api/JobInformationApi";
import { jobPageList } from "@/api/JobInformationApi";
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
import { getCommonTableHeight } from "@/utils/commonTableHeight.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const router = useRouter();
const formObj = reactive({
  item: [
    {
      input: true,
      label: "",
      prop: "jobName",
      placeholder: "请输入岗位名称",
      disabled: false,
    },
    {
      input: true,
      label: "",
      prop: "jobKeywords",
      placeholder: "请输入岗位关键词",
      disabled: false,
    },
  ],
  btn: [
    {
      type: "primary",
      name: "搜索",
      className: "el-button-primary",
      clickFun: () => {
        handleQuery();
      },
    },
    {
      type: "primary",
      name: "重置",
      className: "el-button-primary",
      clickFun: () => {
        resetTabState();
      },
    },
  ],
});
const formInline = reactive({
  pageNum: 1,
  pageSize: 10,
  jobName: null, //岗位名称
  jobNumber: null, //工号
});

const resetTabState = () => {
  // 重置表单字段
  Object.keys(formInline).forEach((key) => {
    formInline[key] = "";
  });
  // 重置分页
  formInline.pageNum = 1;
  formInline.pageSize = 10;
  // 重置分页对象
  pagination.page = 1;
  pagination.limit = 10;
  pagination.total = 0;
  // 重新查询
  getJobList();
};

const tableData = ref([]);
const pagination = reactive({
  total: 10,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

// const total = ref(0);

const multipleSelection = ref([]);
const tabHeight = ref(0);

// 页面高度
const updateViewportHeight = () => {
  tabHeight.value = getCommonTableHeight();
};
onMounted(() => {
  updateViewportHeight(); // 初始化视口高度
  window.addEventListener("resize", updateViewportHeight); // 监听窗口大小变化
  getJobList();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateViewportHeight); // 移除监听
});

const getJobList = () => {
  jobPageList(formInline).then((res) => {
    console.log("res", res);

    if (res.data.records && res.data.records.length > 0) {
      tableData.value = res.data.records;
      console.log("tableData", tableData);

      pagination.total = res.data.total;
    } else {
      tableData.value = [];
    }
  });
};
const handleQuery = () => {
  getJobList();
};
const sizeChange = (size) => {
  pagination.limit = size.limit;
  formInline.pageNum = pagination.page;
  formInline.pageSize = size.limit;
  pagination.page = size.page;
  getJobList();
};
const currentChange = (page) => {
  formInline.pageNum = page.page;
  formInline.pageSize = pagination.limit;
  pagination.page = page.page;
  getJobList();
};

// 新建岗位
const addPosition = () => {
  router.push({
    name: "jobInformationAdd",
  });
};
// 查看
const handleInfo = (row) => {
  router.push({
    name: "jobInformationView",
    query: {
      id: row.id,
    },
  });
};
// 编辑
const handleGetApplication = (row) => {
  router.push({
    name: "jobInformationEdit",
    query: {
      id: row.id,
    },
  });
};
// 停用
const changeStatus = (row) => {
  // console.log(row.statusVal, "1111--------: ");
  let params = {
    id: row.id,
    jobStatus: row.statusVal ? 0 : 1,
  };
  // console.log(params, "1111--------: ");
  saveOrUpdate(params).then((res) => {
    console.log(res, "1111--------: ");
    if (res.code == 200) {
      ElMessage.success("操作成功");
      getJobList();
    }
  });
};
const handleSelectionChange = (val) => {
  console.log(val, "1111--------: ");
  multipleSelection.value = val;
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  display: flex;
  font-size: 15px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  margin-right: 10px;
}
</style>
